<template>
  <div class="register">
    <p>用户注册</p>
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="nickname"
        name="昵称"
        label="昵称"
        placeholder="昵称"
        :rules="[{ required: true, message: '请填写昵称' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button 
        round block type="info" 
        native-type="submit"
        @click="register"
        >点击注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone:"",
      nickname:"",
      password:""
    };
  },

  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    register(){
        //console.log(this.username,this.userphone,this.password)
        this.$api.reqRegister(this.username,this.userphone,this.password)
        .then(res=>{
            //注册成功后提示登录
            this.$notify('注册成功请登录')
            this.$router.push('/login')
        })
        .catch(err=>console.log(err))
    }
  },
};
</script>

<style scoped>
.register{
    margin: 3rem auto;
}
.register p{
    width: 100%;
    background: lightskyblue;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    margin-bottom: 1rem;
}
</style>
